<template>
  <div class="ilist">
    <ul>
      <li class="ilist-item" v-for="(item,index) in data" :key="index">
        <div class="img">
          <img :src="item.img" />
        </div>
        <div class="detial">
          <div class="item-type gray">{{ item.type }}</div>
          <div class="title">{{ item.title }}
              <span class="money">{{ item.money}}</span>
          </div>
          <div class="desc gray">{{ item.desc }}</div>
          <div class="about">
            <div class="icons">
              <span class="el-icon-thumb"></span>
              <span class="el-icon-s-comment"></span>
              <span class="el-icon-star-on"></span>
            </div>
            <div class="author gray">
              <span>爆料人:</span>
              <a class="clink">{{ item.author}}</a>
              <span>{{ item.time }}</span>
            </div>
            <div>
              <button class="toLink">直达链接</button>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  //暴露的接口 由父组件传递
  props: ["data"],
  data() {
    return {
    //   img: '',
    //   type: "",
    //   title: "",
    //   desc: "",
    //   author: "",
    //   time: "",
    //   link: ""
    };
  },
  mounted() {
    //   this.img = require();
    console.log(this.data);
  }
};
</script>
<style lang="less">
.ilist-item {
  display: flex;
  font-size: 13px;
  padding: 25px 0;
  border-bottom: 1px solid #dedede;
}
// 图片
.img img {
  height: 175px;
  width: 175px;
}
// 图片右边文字
.detial {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 10px;
  .title {
    font-size: 16px;
  }
  .about {
    margin-top: 10px;
    // height: 75px;
    text-align: center;
    div {
      float: left;
      margin-right: 40px;
    }
    .toLink {
      float: right;
      background-color: #f85e23;
      color: #fff;
      font-size: 16px;
      border-radius: 5px;
      padding: 5px;
      cursor: pointer;
    }
  }
}
.icons,
.author {
  //   line-height: 75px;
}
.icons > span {
  cursor: pointer;
  padding: 0 10px;
  font-size: 18px;
}
.author a {
  padding: 0 10px;
  cursor: pointer;
}
</style>